<script setup lang="ts">
import Grid from "@/components/framework/grid.vue";
import type { DockMenuItem, PageSiderMenuGroup, PageSiderMenuItem } from "@/pages/main/config/types.ts";
import DockMenu from "@/pages/main/layout/dock-menu.vue";
import { hc } from "@/framework/vue/util/render.ts";
import { computed, defineAsyncComponent } from "vue";
import { useDevEnvPanelStore } from "./store/panel-store.ts";
import { IconTaskDock } from "@/modules/dev-env/task/icon.ts";
import { useLocalRef } from "@/framework/vue/hooks/state.ts";
import ToggleView from "@/components/framework/toggle-view.vue";
import ToggleItem from "@/components/framework/toggle-item.vue";
import SiderMenu from "@/pages/main/layout/sider-menu.vue";
import { devEnvMenuItems } from "./index.menu.ts";

const TaskPanel = defineAsyncComponent(() => import("./task/task-panel.vue"));

defineOptions({ name: "dev-env-manager" });

const menus = computed<PageSiderMenuGroup[]>(() => devEnvMenuItems);

const getToggleItems = (children: PageSiderMenuItem[]) => {
  const retList: PageSiderMenuItem[] = [];
  for (const child of children) {
    if (child.component) {
      retList.push(child);
      if (child.children) {
        retList.push(...getToggleItems(child.children));
      }
    }
  }
  return retList;
};

const toggleItems = computed<PageSiderMenuItem[]>(() => menus.value.flatMap(it => getToggleItems(it.children ?? [])));

const activeMenuKey = useLocalRef("dev-env.sider.activeKey", "java.jdk");

const panelStore = useDevEnvPanelStore();
const rightDockMenuItems = computed<DockMenuItem[]>(() => [
  {
    key: "task",
    name: "任务列表",
    icon: hc(IconTaskDock),
    onClick: () => (panelStore.taskPanelOpen = !panelStore.taskPanelOpen),
  },
]);
</script>

<template>
  <grid col-template="240px 1fr auto" class="page-dev-env">
    <!-- 这里不知道为什么加了v-if="true"就能正常运行,不加点击页面切换时就会报错 -->
    <sider-menu v-if="true" :items="menus" v-model:active-key="activeMenuKey" />

    <div class="overflow-y-auto overflow-x-hide position-relative">
      <toggle-view v-model:active-key="activeMenuKey">
        <template v-for="it in toggleItems" :key="it.key">
          <toggle-item :item-id="it.key" :component="it.component!" :cache-enabled="false" />
        </template>
      </toggle-view>
      <task-panel />
    </div>

    <!-- 这里同上 -->
    <dock-menu v-if="true" :items="rightDockMenuItems" placement="right" width="40px" item-height="45px" icon-size="16px" />
  </grid>
</template>
